<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6-数组和对象的解构语法</title>
  <!-- 
  ES6引入了数组和对象的解构赋值（Destructuring Assignment）语法，使得从数组和对象中提取值变得更加简洁和直观。
  1. 数组解构
  数组解构允许我们从数组中提取值并将其赋值给变量。
   1.1 基本语法
  const arr = [1, 2, 3];
  // 解构赋值
  const [a, b, c] = arr;

  console.log(a); // 输出: 1
  console.log(b); // 输出: 2
  console.log(c); // 输出: 3
   1.2 跳过元素
  可以通过逗号跳过数组中的某些元素。
  const arr = [1, 2, 3, 4, 5];
  // 跳过第一个元素
  const [, b, , d] = arr;

  console.log(b); // 输出: 2
  console.log(d); // 输出: 4
   1.3 默认值
  如果数组中没有对应的值，可以为变量设置默认值。
  const arr = [1];
  // c的默认值为3
  const [a, b = 2, c = 3] = arr;

  console.log(a); // 输出: 1
  console.log(b); // 输出: 2
  console.log(c); // 输出: 3
  2. 对象解构
  对象解构允许我们从对象中提取属性并将其赋值给变量。
   2.1 基本语法
  const obj = { x: 1, y: 2 };
  // 解构赋值
  const { x, y } = obj;

  console.log(x); // 输出: 1
  console.log(y); // 输出: 2
   2.2 重命名变量
  可以使用冒号为解构出的变量重命名。
  const obj = { x: 1, y: 2 };
  // 重命名
  const { x: a, y: b } = obj;

  console.log(a); // 输出: 1
  console.log(b); // 输出: 2
   2.3 默认值
  如果对象中没有对应的属性，可以为变量设置默认值。
  const obj = { x: 1 };
  // y的默认值为2
  const { x, y = 2 } = obj;

  console.log(x); // 输出: 1
  console.log(y); // 输出: 2
  3. 嵌套解构
  可以对嵌套的数组和对象进行解构。
   3.1 数组嵌套解构
  const arr = [1, [2, 3]];
  // 解构嵌套数组
  const [a, [b, c]] = arr;

  console.log(a); // 输出: 1
  console.log(b); // 输出: 2
  console.log(c); // 输出: 3
   3.2 对象嵌套解构
  const obj = { a: 1, b: { c: 2 } };

  // 解构嵌套对象
  const { a, b: { c } } = obj;

  console.log(a); // 输出: 1
  console.log(c); // 输出: 2
  4. 总结
  ES6的解构赋值语法极大地简化了从数组和对象中提取值的过程。通过解构赋值，可以提高代码的可读性和可维护性。无论是数组还是对象，都可以使用解构赋值来快速提取所需的值，并且支持默认值和重命名功能，使得代码更加灵活和简洁。
   -->
</head>
<body>

  <script>

    const arr = ["a", "b", "c", null, undefined, "d"];
    // 1. 数组解构
    // 1.1 基本语法
    // const [a, b, c] = arr;
    // console.log(a); // 输出: a
    // console.log(b); // 输出: b
    // console.log(c); // 输出: c
    // 1.2 忽略某些元素
    // const [a, , c] = arr;
    // console.log(a); // 输出: a
    // console.log(c); // 输出: c
    // 1.3 剩余元素
    // const [a, ...rest] = arr;
    // console.log(a); // 输出: a
    // console.log(rest); // 输出: ["b", "c", null, undefined, "d"]
    // 1.4 默认值
    // const [a, b, c = "default"] = arr;
    // console.log(a); // 输出: a
    // console.log(b); // 输出: b
    // console.log(c); // 输出: default
    // 1.5 严格的顺序
    // const [a, , c] = arr.slice(0, 3);
    // console.log(a); // 输出: a
    // console.log(c); // 输出: c

    // 2. 对象解构
    // 2.1 基本语法
    // const { a, b, c } = { a: 1, b: 2, c: 3 };
    // console.log(a); // 输出: 1
    // 2.2 忽略某些属性
    // const { a, c } = { a: 1, b: 2, c: 3 };
    // console.log(a); // 输出: 1
    // console.log(c); // 输出: 3
    // 2.3 剩余属性
    // const { a, ...rest } = { a: 1, b: 2, c: 3 };
    // console.log(a); // 输出: 1
    // console.log(rest); // 输出: { b: 2, c: 3 }
    // 2.4 默认值
    // const { a, b = "default" } = { a: 1 };
    // console.log(a); // 输出: 1
    // console.log(b); // 输出: default
    // 2.5 严格的顺序
    // const { a, c } = { a: 1, b: 2, c: 3 };
    // console.log(a); // 输出: 1
    // console.log(c); // 输出: 3
    // 2.6 嵌套解构
    // const { a: { b: { c } } } = { a: { b: { c: 1 } } };

    // 3. 解构赋值的应用
    // 3.1 函数参数解构
    function sum({ a, b }) {
      return a + b;
    }
    const obj = { a: 1, b: 2 };
    console.log(sum(obj)); // 输出: 3


  </script>
  
</body>
</html>